<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-03-19 08:01:13 
 * @Last Modified by:   RDSunday 
 * @Last Modified time: 2020-03-19 08:01:13 
 */ -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;

        }
        * {
            box-sizing: border-box;
        }
        /* 菜单盒子 */
        .row {
            display: flex;

        }
        .left {
            flex: 35%;
            padding: 15px 0;
        }
        .left h2 {
            padding-left: 8px;
        }
        /* 搜索框 */
        #mySearch {
            width: 100%;
            font-size: 18px;
            height: 50px;
            border: 1px solid #ddd;
        }
        /* 左侧列表 */
        #myMenu {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #myMenu li a {
            text-decoration: none;
            background-color: #f6f6f6;
            padding:  12px;
            font-size: 18px;
            color: black;
            display: block;
        }
        #myMenu li a:hover {
            background-color: #eee;
        }
        .right {
            flex: 65%;
            padding: 15px;

        }

    </style>
</head>
<body>
    <div class="row">
        <div class="left" style="background-color: #bbb;">
            <h2>菜单</h2>
            <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索。。。">
            <ul id="myMenu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">SQL</a></li>
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">Node.js</a></li>
                <li><a href="#">中文分类</a></li>
            </ul>
        </div>

    </div>
    <div class="right" style="background-color: #ddd;">
    <h2>内容</h2>
    <p>Some text..Some text..Some text..Some tex</p>
    <p>Some other text..Some text..Some text..Some text..Some text</p>
    </div>
    <script>
        function myFunction() {
                var input, filter, ul, li, a, i;
                input = document.getElementById("mySearch");
                filter = input.value.toUpperCase();
                ul = document.getElementById("myMenu");
                li = ul.getElementsByTagName("li");
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("a")[0];
                    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
                }
            }
    </script>
</body>
</html>